<template>
  <div className="chinld">
    <h3>子组件</h3>
    <div>
      姓名：{{ name }}<br>
      年龄：{{ age }}
    </div>
    <input type="button" name="aa" @click="changeName" value="改名称">
  </div>
</template>

<script setup>
const props = defineProps({
  name: {
    type: String,
    default: ""
  },
  age: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['funChange'])
const changeName = () => {
  emit('funChange', '李四四')
}

/**
 * 声明一个事件
 * @param obj
 */
const childFuction = (obj) => {
  console.log('子组件事件', obj)
}
defineExpose({
  childFuction,
  props,
})
</script>

<style scoped>
.chinld {
  min-width: 200px;
  background: bisque;
}
</style>